<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets">

    <head>
    </head>
    <body>
        <ui:composition template="/templates/default.xhtml">
		
            <ui:define name="display">
            
                <div id="loading-div">
					<img src="/openhds/resources/images/ajax-loader.gif" /> #{msg.working}
				</div>
            
            	<h:outputText value="#{msg.dbConfigName} > #{msg.dbName}" />
            
                <h1>#{msg.dbConfig}</h1>
                <h:messages id="successInfo" globalOnly="true" />
                <h:form prependId="false">
                
                	<h:outputText value="#{msg.dbMsg}" />
                                
                    <h:panelGrid columns="4">
                       
                        <h:outputText value="#{msg.dbType}:"/>
                 		<h:selectOneRadio id="type" value="#{databaseConfig.dbType}" onchange="submit()" immediate="true" valueChangeListener="#{databaseConfig.updateType}">
   							<f:selectItem itemValue="H2" itemLabel="H2" />
						   	<f:selectItem itemValue="MYSQL" itemLabel="MYSQL" />
						</h:selectOneRadio>
						<h:message for="type" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
						<h:outputText />
                    
                    	<h:outputText value="#{msg.username}:"/>
                        <h:inputText id="user" value="#{databaseConfig.dbUsername}" converter="#{defaultConverter}" />
                        <h:message for="user" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
                    	<h:outputText />
                    
                    	<h:outputText value="#{msg.password}:"/>
                        <h:inputSecret redisplay="true" id="password" value="#{databaseConfig.dbPassword}" converter="#{defaultConverter}" />
                        <h:message for="password" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
                        <h:outputText />
                        
                        <h:outputText value="#{msg.dbUrl}:"/>
                        <h:inputText id="url" value="#{databaseConfig.dbUrl}" binding="#{databaseConfig.inputText}" converter="#{defaultConverter}" size="50" disabled="true" />
                        <h:message for="url" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
                    	<h:commandButton action="#{databaseConfig.editUrl}" value="Edit" />
                    
                    	<h:outputText value="#{msg.dbDriver}:"/>
                        <h:inputText id="driver" value="#{databaseConfig.dbDriver}" converter="#{defaultConverter}" disabled="true" size="50" />
                        <h:message for="driver" errorClass="error" errorStyle="color: red" infoStyle="color: green"/>
                        <h:outputText />
                                                  
                    </h:panelGrid>
                    <br />
                    <h:commandButton styleClass="config" action="#{databaseConfig.create}" value="#{msg.lblCreate}" />
                    
                    <script>
						//<![CDATA[
						(function() {
							$('.config').click(function(evt) {
								$('#loading-div').css('visibility', 'visible');
							});
						})();
						//]]>
					</script>
                </h:form>
            </ui:define>
        </ui:composition>
    </body>
</html>